<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

    <!--声明式渲染-->
    <div id="app">
        {{message}}
        <p>在控制台输入app.message='xxx',我的值就会改变</p>
    </div>
    <script>
        //创建一个Vue根实例
        var app = new Vue({
            //选项
            //el用于指定一个页面中已存在的DOM元素来挂载Vue实例
            //el:'#app',   或者👇
            el:document.getElementById('app'),
            data:{
                message:'你好呀，傻猪🐖'
            }
        })
    </script>


    <div id="app-1">
        {{message}}
    </div>
    <script>
        var app1 = new Vue({
            el:'#app-1',
            data:{
                message:'页面加载于'+new Date().toLocaleString()
            }
        })
    </script>
    

    <!--v-bind 鼠标悬停提示-->
    <div id="app-2">
        <span v-bind:title='message'> 
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <script>
        var app2 = new Vue({
            el:'#app-2',
            data:{
                message:'页面加载于'+new Date().toLocaleString()
            }
        })
    </script>


    <div id="app-3">
        <ul>
            <li v-for="u in user">{{u.name}}</li>
        </ul>
        <p>在控制台输入app3.user=[{name:'xxx'}],我的值就会改变</p>
    </div>
    <script>
        var app3 = new Vue({
            el:'#app-3',
            data:{
                user:[
                    {name:'小彭'},
                    {name:'小蓝'},
                    {name:'小刘'}
                ]
            }
        })
    </script>


    <!--条件-->
    <div id="app-4">
        <p v-if="canSee">你现在可以看到我，在控制台输入 app4.canSee = false，你会发现我消失了</p>
    </div>
    <script>
        var app4 = new Vue({
            el:'#app-4',
            data:{
                canSee:true
            }
        })
    </script>


    <!--循环-->
    <!--v-for 指令可以绑定数组的数据来渲染一个项目列表-->
    <div id="app-5">
        <ol>
            <li v-for="t in todos">
                {{t.text}}
            </li>
        </ol>
        <p>在控制台里，输入 app5.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。</p>
    </div>
    <script>
        var app5 = new Vue({
            el:'#app-5',
            data:{
                todos:[
                    {text:'学习js'},
                    {text:'学习vs'},
                    {text:'学习vue'}
                ]
            }
        })
    </script>


    <!--处理用户输入-->
    <!--用 v-on 指令添加一个事件监听器-->
    <div id="app-6">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转信息</button>
    </div>
    <script>
        var app6 = new Vue({
            el:'#app-6',
            data:{
                message:'你好呀，傻猪🐖'
            },
            methods:{
                reverseMessage:function(){
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>

    <!--v-model 指令,轻松实现表单输入和应用状态之间的双向绑定-->
    <div id="app-7">
        <p>{{message}}     ↑ ↓</p>
        <input v-model="message" />
    </div>
    <script>
        var app7 = new Vue({
            el:'#app-7',
            data:{
                message:'你好呀，，'
            }
        })
    </script>


    <div id="app-8">
        <button v-if="showBtn" v-on:click="handleClick">Chick me</button>
        <p>控制台！！！</p>
    </div>
    <script>
        var app8 = new Vue({
            el:'#app-8',
            data:{
                showBtn:true
            },
            methods:{
                handleClick:function(){
                    console.log('Clicked!')
                }
            }
        })
    </script>


    <!--数据的双向绑定-->
    <div id="app-9">
        <input type="text" v-model="name" placeholder="你的名字" />
        <p>look，下面  ↓</p>
        <h1>你好，{{name}}</h1>
    </div>
    <script>
        var app9 = new Vue({
            el:'#app-9',
            data:{
                name:''
            }
        })
    </script>
</body>
</html>